<template>
    <div id="lessons">
        <el-row class="toolbar">
            <el-col :span="24">
                <el-button :plain="true" type="success" @click="back">返回课程列表</el-button>
                <el-button type="info" @click="handleAdd">新增课节</el-button>
            </el-col>
        </el-row>
        <!--TAble-->
        <p style="font-size: 16px">当前课程名: <b v-text="bel.name"></b></p>
        <el-table :data="ActIty" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="sort" label="排序" width="100" sortable>
                <template slot-scope="scope">
                    <el-input v-model.number="scope.row.sortNum" placeholder="请输入内容"
                              @blur="inputSort(scope.$index, scope.row)"
                              @focus="inputFocus(scope.$index, scope.row)"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="课节标题"></el-table-column>
            <el-table-column prop="mainImg" label='课节封面'>
                <template slot-scope='scope'>
                    <img v-if="scope.row.mainImg" :src='scope.row.mainImg.path'
                         class="mainImg">
                    <span v-else>暂未有图片</span>
                </template>
            </el-table-column>
            <el-table-column prop="teacher" label="课节讲师"></el-table-column>
            <el-table-column label='类型'>
                <template slot-scope='scope'>
                    <p v-if="scope.row.attach.type === 0">图文</p>
                    <p v-else-if="scope.row.attach.type === 1">音频</p>
                    <p v-else-if="scope.row.attach.type === 2">视频</p>
                </template>
            </el-table-column>
            <el-table-column prop="publishDate" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="size"
                           :total="total" style="float:right;"></el-pagination>
        </el-col>
        <!--新增-->
        <el-dialog title="添加课节" v-model="addFormVisible" top="5%" size="large">
            <div style="width: 100%;" class="clear">
                <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm" class="clear">
                    <el-form-item label="课节类型" prop="type" style="width: 50%;">
                        <el-radio-group v-model="addForm.type" @change="radioType">
                            <el-radio :label=0>图文</el-radio>
                            <el-radio :label=1>视频</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序值" prop="sortNum" style="width: 50%;">
                        <el-input v-model="addForm.sortNum" auto-complete="off" style="width: 193px;"></el-input>
                    </el-form-item>
                    <el-form-item label="课节名称" prop="name" style="width: 50%;">
                        <el-input v-model="addForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发布日期" prop="publishDate" style="width: 49%;">
                        <el-date-picker
                                v-model="addForm.publishDate"
                                type="datetime"
                                placeholder="选择日期时间" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="课节内容">
                        <UEditor @ready="editorReady"></UEditor>
                    </el-form-item>
                    <el-form-item label="附件类型" prop="attach.type" style="width: 51%; display: inline-block">
                        <el-radio-group v-model="addForm.attach.type" @change="radioAttach">
                            <el-radio :label=0 v-if="addForm.type === 0">图片</el-radio>
                            <el-radio :label=1 v-if="addForm.type === 0">音频</el-radio>
                            <el-radio :label=2 v-if="addForm.type === 1">视频</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="封面图片" prop="mainImg" style="width: 51%; display: inline-block">
                        <el-upload class="avatar-uploader" :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                                   :show-file-list="false" :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload" :headers="MyHeaders">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="图片附件" style="width: 48%; display: inline-block"
                                  v-if="addForm.attach.type === 0">
                        <el-upload
                                class="upload-demo" :file-list="fileList3"
                                :action="$store.state.imagesUrl + 'api/common/file/upload/attach'"
                                :on-success="handleAvatarSuccessImg" :before-upload="beforeAvatarUploadImg"
                                :headers="MyHeaders" :on-change="command" :data="typesImg">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2000kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="音频附件" style="width: 48%; display: inline-block" v-if="addForm.attach.type === 1">
                        <el-upload
                                class="upload-demo"
                                :action="$store.state.imagesUrl + 'api/common/file/upload/attach'" :file-list="fileList3"
                                :on-success="handleAvatarSuccessMp" :before-upload="beforeAvatarUploadMp"
                                :data="typesMusic" :headers="MyHeaders" :on-change="command">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传mp3文件，且不超过10m</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="视频附件" style="width: 48%; display: inline-block"
                                  v-if="addForm.attach.type === 2">
                        <el-upload class="upload-demo" :on-change="command" accept="video/mp4,video/mpeg,audio/ogg,video/x-flv"
                                   action="" :file-list="fileList3" :show-file-list="false"
                                   :on-success="handleAvatarSuccessVideo"
                                   :headers="MyHeaders" :http-request="videoHttp">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传mp4,mpeg,ogg文件，且不超过10G</div>
                            <div slot="tip" class="el-upload__tip">
                                <el-button size="small" :plain="true" type="info" @click="asasasas">暂停</el-button>
                                <el-button size="small" :plain="true" type="info" @click="asasasas1">恢复</el-button>
                                <el-button size="small" :plain="true" type="info" @click="asasasas2">上传列表</el-button>
                            </div>
                            <div slot="tip" class="el-upload__tip">
                                <p v-if="videoName !== ''">
                                    {{videoName}}
                                    <el-progress :percentage="videoPlan" v-if="videoPlan !== null" :status="statusType"></el-progress>
                                </p>
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer ">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addSubmit('addForm')" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑课节" v-model="editFormVisible" top="5%" size="large">
            <div style="width: 100%;" class="clear">
                <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm" class="clear">
                    <el-form-item label="课节类型" prop="type" style="width: 50%;">
                        <el-radio-group v-model="editForm.type" @change="radioTypeEdit">
                            <el-radio :label=0>图文</el-radio>
                            <el-radio :label=1>视频</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序值" prop="sortNum" style="width: 50%;">
                        <el-input v-model="editForm.sortNum" auto-complete="off" style="width: 193px"></el-input>
                    </el-form-item>
                    <el-form-item label="课节名称" prop="name" style="width: 50%;">
                        <el-input v-model="editForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发布日期" prop="publishDate" style="width: 49%;">
                        <el-date-picker
                                v-model="editForm.publishDate"
                                type="datetime"
                                placeholder="选择日期时间" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="课节内容">
                        <UEditor @ready="editorReadyEdit"></UEditor>
                    </el-form-item>
                    <el-form-item label="附件类型" prop="attach.type" style="width: 51%; display: inline-block">
                        <el-radio-group v-model="editForm.attach.type" @change="radioAttachEdit">
                            <el-radio :label=0 v-if="editForm.type === 0">图片</el-radio>
                            <el-radio :label=1 v-if="editForm.type === 0">音频</el-radio>
                            <el-radio :label=2 v-if="editForm.type === 1">视频</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="封面图片" prop="mainImg" style="width: 51%; display: inline-block">
                        <el-upload class="avatar-uploader" :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                                   :show-file-list="false" :on-success="handleAvatarSuccessEdit"
                                   :before-upload="beforeAvatarUpload" :headers="MyHeaders">
                            <img v-if="imageUrlEdit" :src="imageUrlEdit" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="图片附件" style="width: 48%; display: inline-block"
                                  v-if="editForm.attach.type === 0">
                        <el-upload
                                class="upload-demo" :file-list="fileList"
                                :action="$store.state.imagesUrl + 'api/common/file/upload/attach'"
                                :on-success="handleAvatarSuccessImg" :before-upload="beforeAvatarUploadImg"
                                :headers="MyHeaders" :on-change="commandEdit" :data="typesImg">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                <p>只能上传jpg/png/gif文件，且不超过2000kb</p>
                                <img v-if="EditImg !== ''" :src="EditImg" alt="" style="width: 178px;height: 178px;">
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="音频附件" style="width: 48%; display: inline-block"
                                  v-if="editForm.attach.type === 1">
                        <el-upload
                                class="upload-demo" accept="image/*"
                                :action="$store.state.imagesUrl + 'api/common/file/upload/attach'" :file-list="fileList"
                                :on-success="handleAvatarSuccessMp" :before-upload="beforeAvatarUploadMp"
                                :data="typesMusic" :headers="MyHeaders" :on-change="commandEdit">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                <p>只能上传mp3文件，且不超过10m</p>
                                <audio v-if="EditMusic !== ''" :src="EditMusic" style="display: block!important;" controls="controls">您的浏览器不支持 audio 标签。</audio>
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="视频附件" style="width: 48%; display: inline-block"
                                  v-if="editForm.attach.type === 2">
                        <el-upload class="upload-demo" :on-change="commandEdit" accept="video/mp4,video/mpeg,audio/ogg,video/x-flv"
                                   action="" :file-list="fileList" :show-file-list="false"
                                   :on-success="handleAvatarSuccessVideo"
                                   :headers="MyHeaders" :http-request="videoHttp">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">
                                <p>只能上传mp4,mpeg,ogg文件，且不超过10G</p>
                                <p v-if="EditVideo !== ''">视频ID: <span v-text="EditVideo"></span></p>
                            </div>
                            <div slot="tip" class="el-upload__tip">
                                <p v-if="videoName !== ''">
                                    {{videoName}}
                                    <el-progress :percentage="videoPlan" v-if="videoPlan !== null" :status="statusType"></el-progress>
                                </p>
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer ">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click="editSubmit('editForm')" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import util from '../../common/js/util';
    import {
        courseInfo,
        sectionAdd,
        sectionAuthor,
        sectionComment,
        sectionCommentAudit,
        sectionCommentDel,
        sectionDel,
        sectionInfo,
        sectionList,
        sectionUpdate,
        uploadAuth
    } from '../../api/api';
    import UEditor from '../../components/ueditor/index';

    export default {
        data() {
            return {
                aliyunPath: '/static/aliyunvideo/',
                aliyunScriptTagStatus: 0,
                uploadAuth: null,
                uploadAddress: null,
                uploadVideoId: null,
                uploader: null,
                ActIty: [],
                total: 0,
                page: 1,
                size: 5,
                ActData: {
                    courseId: null
                },
                listLoading: false,
                bel: [],
                MyHeaders: {'X-Authentication': JSON.parse(sessionStorage.getItem('user'))},
                /*新增界面数据*/
                addFormVisible: false,
                addLoading: false,
                addFormRules: {
                    name: {required: true, message: '请输入课节名称', trigger: 'blur'},
                    publishDate: {type: 'date', required: true, message: '请选择发布日期', trigger: 'change'},
                },
                imageUrl: null,
                addForm: {
                    courseId: null,
                    type: 0,
                    name: '',
                    publishDate: null,
                    sortNum: 0,
                    attach: {
                        type: 0,
                        path: '',
                        videoId: '',
                        remark: ''
                    },
                    mainImg: {
                        path: '',
                        remark: ''
                    }
                },
                ueAdd: null,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                typesImg: {
                    type: 0
                },
                typesMusic: {
                    type: 1
                },
                sortNum: null,
                fileList3: [],
                updateGuz: false,
                videoName: '',
                videoPlan: null,
                statusType: '',
                /*编辑*/
                editFormVisible: false,
                editLoading: false,
                editFormRules: {
                    name: {required: true, message: '请输入课节名称', trigger: 'blur'},
                    publishDate: {type: 'date', required: true, message: '请选择发布日期', trigger: 'change'},
                },
                editForm: {
                    type: 0,
                    name: '',
                    publishDate: null,
                    sortNum: 0,
                    attach: {
                        type: 0,
                        path: '',
                        videoId: '',
                        remark: ''
                    },
                    mainImg: {
                        path: '',
                        remark: ''
                    }
                },
                ueEdit: null,
                imageUrlEdit: null,
                fileList: [],
                fileListSh: false,
                EditImg: '',
                EditMusic: '',
                EditVideo: '',
                videoType: 0,
                newType: null,
                newTrue: false,
                videoSum: 0
            }
        },
        methods: {
            editorReady(editorInstance) {
                this.ueAdd = editorInstance;
                editorInstance.setContent('');
                editorInstance.addListener('contentChange', () => {
                    console.log('内容发生了变化：', editorInstance.getContent());
                });
            },
            editorReadyEdit(editorInstance) {
                this.ueEdit = editorInstance;
                editorInstance.setContent('');
                editorInstance.addListener('contentChange', () => {
                    console.log('内容发生了变化：', editorInstance.getContent());
                });
            },
            /*分页*/
            selsChange: function (sels) {
                this.sels = sels;
            },
            handleCurrentChange(val) {
                this.page = val;
                this.postCourseID();
            },
            back() {
                this.$router.push('/course');
            },
            /*获取数据*/
            postCourseID() {
                let id = this.$route.params.id;
                let para = {
                    vno: 'v1'
                };
                courseInfo(id, para).then(res => {
                    this.bel = res.data;
                    this.imageUrls = res.data.mainImg.path;
                });
                let paras = {
                    page: this.page,
                    size: this.size,
                    data: this.ActData = {
                        courseId: this.$route.params.id
                    }
                };
                sectionList(paras).then(res => {
                    this.listLoading = false;
                    this.ActIty = res.data.content;
                    this.total = res.data.totalElements;
                });
                this.insertScriptTag();
            },

            inputFocus(index, row) {
                this.sortNum = row.sortNum;
            },
            inputSort(index, row) {
                if (this.sortNum === row.sortNum) return;
                this.listLoading = true;
                sectionUpdate(row).then((res) => {
                    this.$message({message: res.message, type: 'success'});
                    this.postCourseID();
                    this.listLoading = false;
                })
            },
            /*删除*/
            handleDel(row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {id: row.id};
                    let id = row.id;
                    sectionDel(id, para).then((res) => {
                        this.listLoading = false;
                        if (res.code !== 20000) {
                            this.$message({message: res.message, type: 'error'});
                        } else {
                            this.$message({message: res.message, type: 'success'});
                        }
                        this.postCourseID();
                    });
                })
            },
            /*新增*/
            handleAdd() {
                this.addFormVisible = true;
                this.imageUrl = null;
                this.addForm.mainImg.path = null;
                this.videoType = 0;
                this.addForm = {
                    courseId: null,
                    type: 0,
                    name: '',
                    publishDate: null,
                    attach: {
                        type: 0,
                        path: '',
                        videoId: '',
                        remark: ''
                    },
                    mainImg: {
                        path: '',
                        remark: ''
                    }
                };
                this.videoName = '';
                if (this.ueAdd !== null) {
                    this.ueAdd.setContent('');
                }
            },
            radioType(val) {
                if (val === 0) {
                    this.addForm.attach.type = 0;
                } else {
                    this.addForm.attach.type = 2;
                }
            },
            radioAttach(val) {
                this.addForm.attach.type = val;
                this.fileList3 = [];
            },
            addSubmit(a) {
                this.$refs[a].validate((valid) => {
                    if (valid) {
                        if(this.ueAdd.getContent() === '' ){this.$message.error('请填写内容!');return;}
                        if(this.imageUrl === null ){this.$message.error('请上传封面图片!');return;}
                        if(this.bel.type !== 1){if(typeof (this.fileList3[0]) === 'undefined'){this.$message.error('请上传附件!');return;}}
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            let para = this.addForm;
                            para.courseId = this.bel.id;
                            para.content = this.ueAdd.getContent();
                            if(this.bel.type !== 1){
                                if(para.attach.type === 2){
                                    para.attach.videoId = this.fileList3[0].response.data.videoId;
                                }else{
                                    para.attach.path = this.fileList3[0].response.data.path;
                                }
                            }else{
                                if(typeof (this.fileList3[0]) !== 'undefined'){
                                    if(para.attach.type === 2){
                                        para.attach.videoId = this.fileList3[0].response.data.videoId;
                                    }else{
                                        para.attach.path = this.fileList3[0].response.data.path;
                                    }
                                }
                            }

                            sectionAdd(para).then((res) => {
                                this.addLoading = false;
                                if (res.code !== 20000) {
                                    this.$message({message: res.message, type: 'error'});
                                } else {
                                    this.$message({message: res.message, type: 'success'});
                                    this.fileList3 = [];
                                }
                                this.addFormVisible = false;
                                this.postCourseID();
                            });
                        });
                    }
                })
            },
            /*编辑*/
            mainFist(){
                this.EditImg = this.EditMusic = this.EditVideo = this.videoName = '';
            },
            handleEdit(row){
                this.editForm = {type: 0, name: '', publishDate: null, attach: {type: 0, path: '', videoId: '', remark: ''}, mainImg: {path: '', remark: ''}};
                this.mainFist();
                this.videoType = 1;
                sectionInfo(row.id,{}).then(res => {
                    console.log(res);
                    this.editForm = res.data;
                    this.editForm.publishDate = new Date(res.data.publishDate);
                    this.imageUrlEdit = res.data.mainImg.path;
                    this.newType = res.data.attach.type;
                    this.newTrue = false;
                    if(res.data.attach.type === 0){
                        this.EditImg = res.data.attach.path;
                    }else if(res.data.attach.type === 1){
                        this.EditMusic = res.data.attach.path;
                    }else if(res.data.attach.type === 2){
                        this.EditVideo = res.data.attach.videoId;
                    }
                    this.contentEdit();
                });
                this.fileList = [];
                this.editFormVisible = true;
            },
            contentEdit(){
                var time = setInterval(() => {
                    if (this.ueEdit !== null) {
                        this.ueEdit.setContent(this.editForm.content);
                        clearInterval(time);
                    }
                }, 100);
            },
            radioTypeEdit(val) {
                if (val === 0) {
                    this.editForm.attach.type = 0;
                } else {
                    this.editForm.attach.type = 2;
                }
            },
            radioAttachEdit(val) {
                if(this.newTrue){this.newType++}
                this.newTrue = true;
                this.editForm.attach.type = val;
                this.fileList = [];
            },
            editSubmit(a){
                this.$refs[a].validate((valid) => {
                    if (valid) {
                        let abc = false;
                        if(this.ueEdit.getContent() === '' ){this.$message.error('请填写内容!');return;}
                        if(this.imageUrlEdit === null ){this.$message.error('请上传封面图片!');return;}
                        if(this.newType !== this.editForm.attach.type){
                            if(typeof (this.fileList[0]) === 'undefined'){
                                this.$message.error('您已经选择其他类型,请重新上传附件或者关闭此弹窗');
                                return;
                            }else{
                                abc = true;
                            }
                        }else{
                            abc = true;
                        }
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            let para = this.editForm;
                            para.courseId = this.bel.id;
                            para.content = this.ueEdit.getContent();
                            if(abc){
                                if (typeof (this.fileList[0]) !== 'undefined'){
                                    if(para.attach.type === 2){
                                        para.attach.videoId = this.fileList[0].response.data.videoId;
                                    }else{
                                        para.attach.path = this.fileList[0].response.data.path;
                                    }
                                }
                            }
                            sectionUpdate(para).then((res) => {
                                console.log(res)
                                this.addLoading = false;
                                if (res.code !== 20000) {
                                    this.$message({message: res.message, type: 'error'});
                                } else {
                                    this.$message({message: res.message, type: 'success'});
                                }

                                this.editFormVisible = false;
                                this.postCourseID();
                            });
                        });
                    }
                })
            },
            /*上传封面*/
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response.data.pathFull;
                this.addForm.mainImg.path = file.response.data.path;
            },
            handleAvatarSuccessEdit(res, file) {
                this.imageUrlEdit = file.response.data.pathFull;
                this.editForm.mainImg.path = file.response.data.path;
            },
            beforeAvatarUpload(file) {
                console.log(file);
                const isJPG = file.type === 'image/jpeg' || 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /*上传附件图片*/
            command(file, fileList) {
                if (typeof (fileList.slice(-1)[0].response) !== 'undefined') {
                    this.fileList3 = fileList.slice(-1);
                }
            },
            commandEdit(file, fileList) {
                if(this.fileListSh){this.fileListSh = false;return;}
                this.mainFist();
                if (typeof (fileList.slice(-1)[0].response) !== 'undefined') {
                    this.fileList = fileList.slice(-1);
                }
            },
            handleAvatarSuccessImg(res, file, fileList) {
                console.log(fileList)
            },
            beforeAvatarUploadImg(file) {
                const isJPG = file.type === 'image/jpeg'|| file.type === 'image/png'|| file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('请选择正确格式的图片!');
                }
                if (!isLt2M) {
                    this.$message.error('上传附件图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /*上传附件音频*/
            handleAvatarSuccessMp(res, file, fileList) {
                console.log(file, fileList)
            },
            beforeAvatarUploadMp(file) {
                const isJPG = file.type === 'audio/mp3';
                const isLt10M = file.size / 1024 / 1024 < 10;
                if (!isJPG) {
                    this.$message.error('请选择正确格式的音频!');
                }
                if (!isLt10M) {
                    this.$message.error('上传附件音频大小不能超过 10MB!');
                }
                return isJPG && isLt10M;
            },
            /*上传附件视频*/
            handleAvatarSuccessVideo(res, file, fileList) {
                console.log(file, fileList)
            },
            videoHttp(options) {
                console.log(options);
                uploadAuth({fileName: options.file.name, title: this.bel.name}).then(res => {
                    console.log(res);
                    let userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}';
                    this.uploadAuth = res.data.uploadAuth || '';
                    this.uploadAddress = res.data.uploadAddress || '';
                    this.uploadVideoId = res.data.videoId || '';
                    if(this.uploader === null){
                        this.initVodUpload();
                    }
                    this.uploader.addFile(options.file, null, null, null, userData);
                    this.uploader.startUpload();
                });
            },
            asasasas(){
                this.uploader.stopUpload();
            },
            asasasas1(){
                this.uploader.startUpload();
            },
            asasasas2(){
                console.log(this.uploader.listFiles());
            },

            initVodUpload(){
                let _this = this;
                this.uploader = new VODUpload({
                    // 开始上传
                    'onUploadstarted': function (uploadInfo) {
                        _this.statusType = null;
                        _this.mainFist();
                        _this.uploader.setUploadAuthAndAddress(uploadInfo, _this.uploadAuth, _this.uploadAddress);
                        _this.fileList3 = _this.fileList = [];
                        console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
                    },
                    // 文件上传成功
                    'onUploadSucceed': function (uploadInfo) {
                        _this.statusType = 'success';
                        if(_this.videoType === 0){
                            _this.fileList3.push({response:{data:{path: '',videoId: _this.uploadVideoId}}});
                        }else{
                            _this.fileList.push({response:{data:{path: '',videoId: _this.uploadVideoId}}});
                        }
                        console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
                    },
                    // 文件上传失败
                    'onUploadFailed': function (uploadInfo, code, message) {
                        _this.statusType = 'exception';
                        console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
                    },
                    // 文件上传进度，单位：字节
                    'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
                        _this.videoName = uploadInfo.file.name;
                        _this.videoPlan = Math.ceil(uploadedSize * 100 / totalSize);
                        console.log("上传文件名称:" + uploadInfo.file.name + ",大小(字节):" + totalSize + ", 进度:" + Math.ceil(uploadedSize * 100 / totalSize) + "%");
                    },
                    // 上传凭证超时
                    'onUploadTokenExpired': function () {
                        console.log("onUploadTokenExpired");
                        _this.uploader.resumeUploadWithAuth(_this.uploadAuth);
                    }
                });
                _this.uploader.init();
            },
            insertScriptTag() {
                const _this = this;
                let aliyunSdkScriptTag = document.getElementById('aliyunSdkScriptTag');
                let vodSdkScriptTag = document.getElementById('vodSdkScriptTag');
                // 如果这个tag不存在，则生成相关代码tag以加载代码
                if (aliyunSdkScriptTag === null) {
                    vodSdkScriptTag = document.createElement('script');
                    vodSdkScriptTag.type = 'text/javascript';
                    vodSdkScriptTag.src = this.aliyunPath + 'aliyun-sdk.min.js';
                    vodSdkScriptTag.id = 'vodSdkScriptTag';
                    aliyunSdkScriptTag = document.createElement('script');
                    aliyunSdkScriptTag.type = 'text/javascript';
                    aliyunSdkScriptTag.src = this.aliyunPath + 'vod-sdk-upload-1.0.6.min.js';
                    aliyunSdkScriptTag.id = 'aliyunSdkScriptTag';
                    let s = document.getElementsByTagName('head')[0];
                    s.appendChild(vodSdkScriptTag);
                    s.appendChild(aliyunSdkScriptTag);
                }
                // 等待代码加载完成后初始化编辑器
                if (vodSdkScriptTag.loaded) {
                    _this.aliyunScriptTagStatus++;
                } else {
                    vodSdkScriptTag.addEventListener('load', () => {
                        _this.aliyunScriptTagStatus++;
                        vodSdkScriptTag.loaded = true;
                        _this.initVodUpload();
                    });
                }
                if (aliyunSdkScriptTag.loaded) {
                    _this.aliyunScriptTagStatus++;
                } else {
                    aliyunSdkScriptTag.addEventListener('load', () => {
                        _this.aliyunScriptTagStatus++;
                        aliyunSdkScriptTag.loaded = true;
                        _this.initVodUpload();
                    });
                }
            }
        },
        mounted() {
            this.postCourseID();
        },
        components: {
            UEditor,
        },
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #lessons {
        .mainImg {
            width: auto;
            height: 80px;
            padding: 10px 0;
            vertical-align: middle;
        }
        .avatar-uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 182px;
            text-align: center;
            line-height: 1;
            &:hover {
                border-color: #20a0ff;
            }
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-form > div {
            float: left;
            width: 100%;
        }
    }

    .clear {
        clear: both;
    }

    .clear:after {
        clear: both;
        content: ' ';
        display: block;
        font-size: 0;
        line-height: 0;
        visibility: hidden;
        width: 0;
        height: 0;
    }

    .clear {
        zoom: 1
    }
</style>